<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        <div>{{ message | filterName}}</div>
        <div>{{ message | name}}</div>
    </div>

    <script type="text/javascript">
        //全局指令放在上面
        Vue.filter('name',function(value){
            console.log(value)
            if (!value) return '';
            value = value.toString();
            return value.charAt(0).toUpperCase() + value.slice(1)
        })
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            filters: {
                filterName: function(value, format) {
                    if (!value) return '';
                    value = value.toString();
                    return value.charAt(0).toUpperCase() + value.slice(1)
                }
            }
        })
    </script>
</body>
</html>